<template>
  <div>
    <!-- 这是头部导航栏区域 -->
    <div class="header-top">
      <el-row>
        <el-col :xs="3" :sm="3" :md="2" :lg="2" :xl="2">
          <div class="index-logo"></div>
        </el-col>
        <el-col :xs="21" :sm="21" :md="10" :lg="12" :xl="12">
          <div class="demo-input-size">
            <el-input placeholder="请输入内容" class prefix-icon="el-icon-search" v-model="input1"></el-input>
          </div>
        </el-col>
        <el-col :md="12" :lg="10" :xl="10" class="hidden-sm-and-down">
          <div class="grid-content">
            <div class="index-navbar clearfix">
              <router-link to="/index" class="hidden-xs-only index-navbar-item">首页</router-link>
            </div>
            <div class="index-navbar clearfix">
              <router-link to="/Rentalhousing" class="index-navbar-item">出租房源</router-link>
            </div>
            <div class="index-navbar clearfix">
              <el-dropdown trigger="click">
                <span class="index-navbar-item">人民币 - ￥</span>
                <el-dropdown-menu slot="dropdown" class="rmb-drop">
                  <el-dropdown-item class="rmb-drop-item">常用货币</el-dropdown-item>
                  <el-dropdown-item class="rmb-drop-item active-rmb">
                    人民币 - ￥
                    <i class="el-icon-check duigou"></i>
                  </el-dropdown-item>
                  <el-dropdown-item class="rmb-drop-item">美元 - $</el-dropdown-item>
                  <el-dropdown-item class="rmb-drop-item">日元 - ¥</el-dropdown-item>
                  <el-dropdown-item class="rmb-drop-item">港币 - $</el-dropdown-item>
                  <el-dropdown-item class="rmb-drop-item">新台币 - $</el-dropdown-item>
                  <el-dropdown-item class="rmb-drop-item">欧元 - €</el-dropdown-item>
                  <el-dropdown-item class="rmb-drop-item">英镑 - £</el-dropdown-item>
                  <el-dropdown-item class="rmb-drop-item">澳大利亚元 - $</el-dropdown-item>
                  <el-dropdown-item class="rmb-drop-item">阿联酋迪拉姆 - ﺩ.ﺇ</el-dropdown-item>
                  <el-dropdown-item class="rmb-drop-item">波兰兹罗提 - zł</el-dropdown-item>
                  <el-dropdown-item class="rmb-drop-item">巴西雷亚尔 - R$</el-dropdown-item>
                  <el-dropdown-item class="rmb-drop-item">丹麦克朗 - kr</el-dropdown-item>
                  <el-dropdown-item class="rmb-drop-item">韩元 - ₩</el-dropdown-item>
                  <el-dropdown-item class="rmb-drop-item">其他货币</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <div class="index-navbar clearfix">
              <router-link to="/experience" class="index-navbar-item">体验</router-link>
            </div>
            <div class="index-navbar clearfix">
              <router-link to="/story" class="index-navbar-item">故事</router-link>
            </div>
            <div class="index-navbar clearfix">
              <router-link to="/help" class="index-navbar-item">帮助</router-link>
            </div>
            <div class="index-navbar clearfix">
              <router-link to="/forum" class="index-navbar-item">论坛</router-link>
            </div>
            <div class="index-navbar clearfix">
              <router-link to="/login" class="index-navbar-item">登录</router-link>
            </div>
            <div class="index-navbar clearfix">
              <router-link to="/register" class="index-navbar-item">注册</router-link>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 这是中间内容区域 -->
    <router-view></router-view>
    <!-- 这是尾部区域 -->

    <div class="footer">
      <div class="line-top"></div>
      <div class="container">
        <div class="row">
          <div class="col-sm-3">
            <ul>
              <li class="footer-list-top">爱彼迎</li>
              <li>
                <router-link to="/list" class="footer-list-bottom">工作机会</router-link>
              </li>
              <li>
                <router-link to="/list" class="footer-list-bottom">新闻</router-link>
              </li>
              <li>
                <router-link to="/list" class="footer-list-bottom">政策</router-link>
              </li>
              <li>
                <router-link to="/list" class="footer-list-bottom">帮助</router-link>
              </li>
              <li>
                <router-link to="/list" class="footer-list-bottom">多元化与归属感</router-link>
              </li>
              <li>
                <router-link to="/list" class="footer-list-bottom">
                  <span>无障碍设施</span>
                  <span class="footer-new">New</span>
                </router-link>
              </li>
            </ul>
          </div>
          <div class="col-sm-3">
            <ul>
              <li class="footer-list-top">发现</li>
              <li>
                <router-link to="/list" class="footer-list-bottom">信任与安全</router-link>
              </li>
              <li>
                <router-link to="/list" class="footer-list-bottom">旅行基金</router-link>
              </li>
              <li>
                <router-link to="/list" class="footer-list-bottom">爱彼迎公民</router-link>
              </li>
              <li>
                <router-link to="/list" class="footer-list-bottom">商务差旅</router-link>
              </li>
              <li>
                <router-link to="/list" class="footer-list-bottom">旅游指南</router-link>
              </li>
              <li>
                <router-link to="/list" class="footer-list-bottom">爱彼迎杂志</router-link>
              </li>
            </ul>
          </div>
          <div class="col-sm-3">
            <ul>
              <li class="footer-list-top">出租</li>
              <li>
                <router-link to="/list" class="footer-list-bottom">为什幺出租？</router-link>
              </li>
              <li>
                <router-link to="/list" class="footer-list-bottom">待客之道</router-link>
              </li>
              <li>
                <router-link to="/list" class="footer-list-bottom">房东义务</router-link>
              </li>
              <li>
                <router-link to="/list" class="footer-list-bottom">
                  <span>开展体验</span>
                  <span class="footer-new">New</span>
                </router-link>
              </li>
              <li>
                <router-link to="/list" class="footer-list-bottom">Open Homes</router-link>
              </li>
            </ul>
          </div>
          <div class="col-sm-3">
            <ul>
              <li class="footer-list-top">
                <img src="./images/wChat.jpg" alt />
              </li>
              <li>
                <router-link to="/list" class="footer-list-bottom">条款</router-link>
              </li>
              <li>
                <router-link to="/list" class="footer-list-bottom">隐私政策</router-link>
              </li>
              <li>
                <router-link to="/list" class="footer-list-bottom">网站地图</router-link>
              </li>
            </ul>
          </div>
        </div>
        <div class="line-bottom"></div>
        <div class="footer-bottom">
          <div class="footer-bottom-left">
            <img src="./images/footer-logo.jpg" alt />
          </div>
          <div class="footer-bottom-right">
            <p>
              京ICP备16017121号-3 京ICP证 160773号
              <img src="./images/police.png" alt />
              京公网安备 11010502032345号安彼迎网络（北京）有限公司
            </p>
            <p>© 2019 Airbnb, Inc. All rights reserved.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input1: ""
    };
  }
};
</script>

<style lang>
* {
  margin: 0px;
  padding: 0px;
}
/* 清除浮动样式 */
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}
.header-top {
  height: 80px;
  background: #fff;
}
.grid-content {
  height: 80px;
  line-height: 80px;
}
/* 首页的logo样式 */
.index-logo {
  width: 80px;
  height: 80px;
  padding-left: 30px;
  background-image: url(./images/logoh.png);
  background-size: 100%;
}
/* 首页的搜索 */
.demo-input-size {
  line-height: 78px;
  width: 60%;
}
/* 首页的nav */
.index-navbar {
  display: inline-block;
  height: 78px;
}
.index-navbar:hover {
  border-bottom: 2px solid #000;
}
.index-navbar-item {
  height: 80px;
  padding: 0px 12px;
  text-decoration: none;
  color: #000;
  font-size: 16px;
}
/* nav里面人民币样式 */
.active-rmb {
  color: rgb(0, 132, 138);
}
.rmb-drop {
  width: 328px;
  height: 400px;
  border: 1px solid #ebebeb;
  overflow: auto;
  margin-top: 0px !important;
}
.duigou {
  margin-left: 150px;
}
.rmb-drop-item {
  width: 279px;
  height: 50px;
  padding: 0 16px;
  margin: 0 auto;
}
.rmb-drop-item:hover {
  border-bottom: 1px solid rgb(118, 118, 118);
  background: none;
  color: #737478;
}
/* 尾部的样式 */
.line-top {
  width: 100%;
  height: 1px;
  background: #ebebeb;
  margin-bottom: 50px;
}
.line-bottom {
  width: 100%;
  height: 1px;
  background: #ebebeb;
  margin-bottom: 30px;
}
.silie {
  border: 1px solid red;
}
li {
  list-style: none;
  padding: 5px 0px;
}
.footer-list-bottom {
  color: black;
  font-size: 14px;
  color: #767676 !important;
  font-weight: 800;
  line-height: 0.5;
}
.footer-list-top {
  font-size: 14px;
  color: rgb(72, 72, 72) !important;
  font-weight: 800;
  margin-bottom: 16px;
}
.footer-new {
  width: 25px;
  height: 16px;
  background-color: rgb(0, 106, 112) !important;
  color: white;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  padding: 0 5px;
  border-radius: 4px;
}
.footer-bottom {
  padding-bottom: 48px;
}
.footer-bottom-left,
.footer-bottom-right {
  display: inline-block;
}
.footer-bottom-left img {
  margin-top: -25px;
}
.footer-bottom-right p {
  padding: 0px;
  margin: 0px;
  font-size: 14px;
  line-height: 1.28571em !important;
  color: rgb(118, 118, 118) !important;
  font-weight: 600;
}
</style>
